Diana Laura Abriz Juárez
 Público
0/140
30.0 segundos
Sigue creando clips después del anuncio
No puedes crear clips mientras se reproduce un anuncio
Aprende React Desde Cero - Curso de React Con Proyectos
27 KMe gusta
960.126Visualizaciones
202215 mar
Aprende los fundamentos de React en este curso desde cero. Crearás cuatro proyectos paso a paso y aprenderás los fundamentos para comenzar a crear aplicaciones web interactivas con React. ✏️ Curso creado por: Estefania Cassingena Navone. Síguela en Twitter   / estefaniacassn  . 💻 Código en GitHub: 🔗 Proyecto 1: https://github.com/estefaniacn/testim... 🔗 Proyecto 2: https://github.com/estefaniacn/contad... 🔗 Proyecto 3: https://github.com/estefaniacn/calcul... 🔗 Proyecto 4: https://github.com/estefaniacn/aplica... 🔗 Proyecto 1 Componentes de Clase :https://github.com/estefaniacn/testim... 🔗 Proyecto 2 Componentes de Clase: https://github.com/estefaniacn/contad... 📌 Aprende a programar gratis con freeCodeCamp: https://www.freecodecamp.org/espanol/ 💡 Cursos: HTML y CSS:    • Aprende HTML y CSS - Curso Desde Cero   JavaScript:    • Aprende JavaScript - Curso Completo d...   ⭐️ Contenido ⭐️ 00:00:00 Introducción 00:00:36 Proyectos 00:02:20 Estructura del curso 00:04:05 Conocimiento previo necesario para el curso 00:04:45 ¿Qué es React? Ventajas de React 00:07:49 Conceptos Básicos para React 00:23:52 Descargar e Instalar Node.js 00:28:58 Documentación Oficial de React 🔹 Introducción a JSX 00:29:35 ¿Qué es JSX? 00:34:18 Elemento en React 00:34:51 Diferencias entre elemento y componente 00:36:19 Introducción a react-dom y DOM 00:38:09 Elementos HTML que se pueden usar 00:39:05 Cómo reconocer elementos y componentes 00:40:09 Atributos 00:47:45 Estructura JSX con elementos anidados 00:49:01 Cómo renderizar componentes y elementos 00:52:47 Self-closing tags 00:53:59 Insertar JavaScript en JSX 🔹 Estructura Inicial 00:56:59 Crear la Estructura Básica con create-react-app. 🔹 Proyecto 1: Clon de Testimonios de freeCodeCamp 01:26:22 Inicio del Proyecto 01:26:55 Crear la Estructura Inicial 01:29:27 Identificar los Componentes 01:32:04 Crear un Componente 01:42:28 Preparar el Proyecto 01:50:17 Mostrar un Componente 01:53:14 Importar un Componente 01:54:40 Exportar un Componente 01:58:28 Herramientas de React 01:59:16 Exportación Nombrada 02:01:26 Asignar Estilos con CSS 02:21:01 Recibir props en un Componente 02:25:59 Pasar props a un Componente 02:29:32 Personalizar la Imagen 02:36:56 Texto en Negrita 02:42:07 Revisión Final y Herramientas de React 🔹 Proyecto 2: Contador de Clics 02:49:19 Inicio del Proyecto 02:50:56 Crear la aplicación 02:53:32 Prepara el proyecto 02:55:58 Importar imágenes 03:00:06 Asignar Estilos con CSS 03:05:07 Crear el Botón 03:06:45 props del Botón 03:07:21 Sintaxis de Desestructuración 03:08:31 Clase Basada en Condición 03:11:46 Asignar Event Listener 03:14:50 Crear los Botones 03:17:39 Definir función en un componente 03:20:15 Pasar función como prop 03:24:36 Probar las funciones 03:25:28 Estilos para los botones 03:31:04 Componente contador 03:33:40 Agregar el contador 03:39:05 Herramientas de React 03:39:37 Actualizar el contador 03:49:29 Retos y Comentarios Finales 🔹 Proyecto 3: Calculadora Interactiva 03:52:03 Inicio 03:53:32 Crear la aplicación 03:55:30 Adaptar el proyecto 03:58:25 Comenzar el proyecto 04:05:23 Contenedor principal 04:08:16 Estructura de la calculadora 04:09:43 Crear los componentes 04:11:27 props.children 04:15:20 Atributos de Botón 04:19:15 Definir una Función 04:21:06 Probar el Botón 04:24:11 Estilo para el Botón 04:29:03 Crear los Botones 04:33:37 Componente Pantalla 04:38:37 Estilo para la pantalla 04:43:06 Botón clear 04:46:56 Estilo para el botón clear 04:51:08 Mostrar input en la pantalla 04:55:31 Asignar event listener 05:02:44 Event Listener para el botón clear 05:06:38 Calcular el resultado 05:13:52 Manejar input vacío 05:17:48 Retos y comentarios finales 🔹 Proyecto 4: Aplicación de Tareas 05:26:43 Inicio del Proyecto 05:28:22 Crear la aplicación 05:30:44 Adaptar el proyecto 05:33:22 Logo y color de fondo 05:37:02 Estilo inicial 05:41:38 Lista de tareas 05:45:09 Confirmar familia tipográfica 05:46:10 Componente tarea 05:50:00 Estilo para tarea 05:55:59 react-icons 06:03:18 props completada 06:05:23 Estilo para tarea completada 06:07:09 Componente formulario 06:10:30 Estilo para el formulario 06:14:12 Agregar un formulario 06:15:42 Componente lista de tareas 06:17:07 Fragmentos 06:19:11 Estilo para lista de tareas 06:21:51 Estado de lista de tareas 06:23:30 Mostrar la lista de tareas 06:26:28 Nuevos props para tarea 06:30:32 Agregar tarea 06:34:22 Manejar cambio 06:39:59 Manejar envío 06:43:29 Generar ids para las tareas 06:52:39 Key para cada tarea 06:54:47 Colores para las tareas 06:56:27 Actualización Automática 06:57:29 Eliminar tarea 07:00:37 Tarea Completada 07:04:56 Retos y comentarios finales 🔹 Componentes de Clase 07:11:58 Introducción a los componentes de clase 07:29:25 Proyecto testimonios freeCodeCamp con componentes de clase 07:42:34 Proyecto contador de clics con componentes de clase 08:10:16 Final de curso
9 vídeos
Cursos de HTML, CSS y JavaScript
freeCodeCamp Español

Sigue la transcripción para no perderte nada.

freeCodeCamp Español

238 K suscriptores

Aprende React Desde Cero - Curso de React Con Proyectos

freeCodeCamp Español
238 K suscriptores
<__slot-el>
<__slot-el>
960.126 visualizaciones 15 mar 2022 Cursos de HTML, CSS y JavaScript
Aprende los fundamentos de React en este curso desde cero. Crearás cuatro proyectos paso a paso y aprenderás los fundamentos para comenzar a crear aplicaciones web interactivas con React. ✏️ Curso creado por: Estefania Cassingena Navone. Síguela en Twitter   / estefaniacassn  . 💻 Código en GitHub: 🔗 Proyecto 1: https://github.com/estefaniacn/testim... 🔗 Proyecto 2: https://github.com/estefaniacn/contad... 🔗 Proyecto 3: https://github.com/estefaniacn/calcul... 🔗 Proyecto 4: https://github.com/estefaniacn/aplica... 🔗 Proyecto 1 Componentes de Clase :https://github.com/estefaniacn/testim... 🔗 Proyecto 2 Componentes de Clase: https://github.com/estefaniacn/contad... 📌 Aprende a programar gratis con freeCodeCamp: https://www.freecodecamp.org/espanol/ 💡 Cursos: HTML y CSS:    • Aprende HTML y CSS - Curso Desde Cero   JavaScript:    • Aprende JavaScript - Curso Completo d...   ⭐️ Contenido ⭐️ 00:00:00 Introducción 00:00:36 Proyectos 00:02:20 Estructura del curso 00:04:05 Conocimiento previo necesario para el curso 00:04:45 ¿Qué es React? Ventajas de React 00:07:49 Conceptos Básicos para React 00:23:52 Descargar e Instalar Node.js 00:28:58 Documentación Oficial de React 🔹 Introducción a JSX 00:29:35 ¿Qué es JSX? 00:34:18 Elemento en React 00:34:51 Diferencias entre elemento y componente 00:36:19 Introducción a react-dom y DOM 00:38:09 Elementos HTML que se pueden usar 00:39:05 Cómo reconocer elementos y componentes 00:40:09 Atributos 00:47:45 Estructura JSX con elementos anidados 00:49:01 Cómo renderizar componentes y elementos 00:52:47 Self-closing tags 00:53:59 Insertar JavaScript en JSX 🔹 Estructura Inicial 00:56:59 Crear la Estructura Básica con create-react-app. 🔹 Proyecto 1: Clon de Testimonios de freeCodeCamp 01:26:22 Inicio del Proyecto 01:26:55 Crear la Estructura Inicial 01:29:27 Identificar los Componentes 01:32:04 Crear un Componente 01:42:28 Preparar el Proyecto 01:50:17 Mostrar un Componente 01:53:14 Importar un Componente 01:54:40 Exportar un Componente 01:58:28 Herramientas de React 01:59:16 Exportación Nombrada 02:01:26 Asignar Estilos con CSS 02:21:01 Recibir props en un Componente 02:25:59 Pasar props a un Componente 02:29:32 Personalizar la Imagen 02:36:56 Texto en Negrita 02:42:07 Revisión Final y Herramientas de React 🔹 Proyecto 2: Contador de Clics 02:49:19 Inicio del Proyecto 02:50:56 Crear la aplicación 02:53:32 Prepara el proyecto 02:55:58 Importar imágenes 03:00:06 Asignar Estilos con CSS 03:05:07 Crear el Botón 03:06:45 props del Botón 03:07:21 Sintaxis de Desestructuración 03:08:31 Clase Basada en Condición 03:11:46 Asignar Event Listener 03:14:50 Crear los Botones 03:17:39 Definir función en un componente 03:20:15 Pasar función como prop 03:24:36 Probar las funciones 03:25:28 Estilos para los botones 03:31:04 Componente contador 03:33:40 Agregar el contador 03:39:05 Herramientas de React 03:39:37 Actualizar el contador 03:49:29 Retos y Comentarios Finales 🔹 Proyecto 3: Calculadora Interactiva 03:52:03 Inicio 03:53:32 Crear la aplicación 03:55:30 Adaptar el proyecto 03:58:25 Comenzar el proyecto 04:05:23 Contenedor principal 04:08:16 Estructura de la calculadora 04:09:43 Crear los componentes 04:11:27 props.children 04:15:20 Atributos de Botón 04:19:15 Definir una Función 04:21:06 Probar el Botón 04:24:11 Estilo para el Botón 04:29:03 Crear los Botones 04:33:37 Componente Pantalla 04:38:37 Estilo para la pantalla 04:43:06 Botón clear 04:46:56 Estilo para el botón clear 04:51:08 Mostrar input en la pantalla 04:55:31 Asignar event listener 05:02:44 Event Listener para el botón clear 05:06:38 Calcular el resultado 05:13:52 Manejar input vacío 05:17:48 Retos y comentarios finales 🔹 Proyecto 4: Aplicación de Tareas 05:26:43 Inicio del Proyecto 05:28:22 Crear la aplicación 05:30:44 Adaptar el proyecto 05:33:22 Logo y color de fondo 05:37:02 Estilo inicial 05:41:38 Lista de tareas 05:45:09 Confirmar familia tipográfica 05:46:10 Componente tarea 05:50:00 Estilo para tarea 05:55:59 react-icons 06:03:18 props completada 06:05:23 Estilo para tarea completada 06:07:09 Componente formulario 06:10:30 Estilo para el formulario 06:14:12 Agregar un formulario 06:15:42 Componente lista de tareas 06:17:07 Fragmentos 06:19:11 Estilo para lista de tareas 06:21:51 Estado de lista de tareas 06:23:30 Mostrar la lista de tareas 06:26:28 Nuevos props para tarea 06:30:32 Agregar tarea 06:34:22 Manejar cambio 06:39:59 Manejar envío 06:43:29 Generar ids para las tareas 06:52:39 Key para cada tarea 06:54:47 Colores para las tareas 06:56:27 Actualización Automática 06:57:29 Eliminar tarea 07:00:37 Tarea Completada 07:04:56 Retos y comentarios finales 🔹 Componentes de Clase 07:11:58 Introducción a los componentes de clase 07:29:25 Proyecto testimonios freeCodeCamp con componentes de clase 07:42:34 Proyecto contador de clics con componentes de clase 08:10:16 Final de curso
9 vídeos
Cursos de HTML, CSS y JavaScript
freeCodeCamp Español

Sigue la transcripción para no perderte nada.

freeCodeCamp Español

238 K suscriptores
Mostrar menos

1308 comentarios

Diana Laura Abriz Juárez
Añade un comentario...
⭐ ¡Hola a todos! Espero que les guste el curso. Aprenderán los fundamentos de React paso a paso con proyectos. Los invito a compartir sus comentarios. Muchas gracias a todos por su apoyo. 🙂
585
Términos importantes: ¿Que es react? 4:50 Biblioteca: 5:30 Ventajas: 6:30 Conceptos Básicos: 8:00 Componentes: 8:00 Componentes funcionales: 10:20 Características de componentes funcionales: 11:40 Props: 12:45 Componente de clase: 15:30 Estado: 18:30 ¿Por que componentes de clases? 19:50 Hooks: 20:40 Event listener: 22:20 Conceptos mas importantes: 23:15 Instalación node.js: 24:10 JSX: 29:50 Elementos en JSX: 34:20 reactDOOM: 36:50 Sintaxis componentes vs elementos: 39:20 Atributos: 40:10 class y className: 41:30 styles: 42:30 Atributos del DOM: 47:30 Estructura de un componente: 47:50 Renderizar componentes: 49:00 Self-Closing TAGs: 52:50 Crear una aplicación de react: 57:00 Iniciar una aplicación inicial de React: 1:00:00 Node_modules: 1:07:40 Public: 1:08:10 manifest.json 1:12:30 robots.txt 1:13:20 .gitignore 1:13:50 packaga_lock.json 1:14:30 json 1:14:30 packaga.json 1:15:40 readme. md 1:16:10 SRC 1:16:40 App.js 1:19:00 App.test.js 1:20:28 Check: 2:06:57
126
Este curso es mucho mejor que los de platzi/udemy, esta muchacha es muy buena enseñando, ya se me quitó el miedo a react, muchas gracias por este curso, lo estoy tomando con mucha disciplina y espero los siguientes
879
Uno curso de Vue hecho por ti seria lo mejor del mundo.
5
⭐ ¡Hola a todos! Esperamos que les guste el nuevo curso. En la descripción pueden encontrar un enlace al código de los proyectos en GitHub y a freeCodeCamp en Español. Los invitamos a compartir sus comentarios. 👍 ¿Listos para aprender React?
416
Excelente curso muchas gracias. para el ejercicio de strong en medio, debemos el testimonio ponerlo en un {<Fragment>texto aqui <strong>texto en negrita</strong></Fragment>} o en vez de usar <Fragment></Fragment> pueden usar <> </>
16
Llevo tan solo 1 hora del curso y tengo que escribir lo siguiente: Eres una genia total en pedagogía, tu dicción de voz, la investigación el saber explicar al detalle y que no se vea complicado, un buen inglés. Gracias Estef, personas como tú hacen que la humanidad tenga sentido.
223
Grande curso. Vengo de Platzi que es de pago y es un desastre. Aquí todo en un solo vídeo, sin meter relleno y directo al grano en 8 horas completísimas. Felicidades!!!
21
Ideas de implementaciones para quienes desean practicar un poco mas con el proyecto de la calculadora: - Que nuestra app detecte cuando pulsamos nuestro teclado numerico en el teclado de la pc y no solo tengamos que hacer el input mediante clics. - Que nuestro componente pantalla permita un numero limitado de caracteres de manera que no se desborde hacia afuera. - Que cuandi iniciemos la calculadora inicie con un valor de 0 en pantalla, para dar una sensacion de encendido de la misma, este valor tiene que ser reemplazado por cualquier input que demos a la calculadora, siempre y cuando ese input no sea el boton "." (punto), ya que podemos estar queriendo comenzar nuestro calculo con un numero decimal.
4
¿Que es react? 4:50 Biblioteca: 5:30 Ventajas: 6:30 Conceptos Básicos: 8:00 Componentes: 8:00 Componentes funcionales: 10:20 Características de componentes funcionales: 11:40 Props: 12:45 Componente de clase: 15:30 Estado: 18:30 ¿Por que componentes de clases? 19:50 Hooks: 20:40 Event listener: 22:20 Conceptos mas importantes: 23:15 Instalación node.js: 24:10 JSX: 29:50 Elementos en JSX: 34:20 reactDOOM: 36:50 Sintaxis componentes vs elementos: 39:20 Atributos: 40:10 class y className: 41:30 styles: 42:30 Atributos del DOM: 47:30 Estructura de un componente: 47:50 Renderizar componentes: 49:00 Self-Closing TAGs: 52:50 Crear una aplicación de react: 57:00 Iniciar una aplicación inicial de React: 1:00:00 Node_modules: 1:07:40 Public: 1:08:10 manifest.json 1:12:30 robots.txt 1:13:20 .gitignore 1:13:50 packaga_lock.json 1:14:30 json 1:14:30 packaga.json 1:15:40 readme. md 1:16:10 SRC 1:16:40 App.js 1:19:00 App.test.js 1:20:28 Primer Proyecto (Testimonios): 1:26:28 Identificar los componentes: 1:29:27 Herramientas de React 1:58:29 Exportación nombrada 1:59:18 Asignar estilos con CSS 2:01:26 02:21:01 Recibir props en un Componente 02:25:59 Pasar props a un Componente 02:29:32 Personalizar la Imagen 02:36:56 Texto en Negrita 02:42:07 Revisión Final y Herramientas de React Segundo proyecto (Contador de clicks) 2:49:20 Check: 2:53:29
5
1:26 Primer proyecto - Esto dicen los estudiantes 2:49 Segundo proyecto - Contador clics
8 horas de puro aprendizaje, se agradece a que personas así existan en las comunidades de software! excelente aporte y gran trabajo
173
Es sin duda el mejor tutorial sobre cualquier cosa de la que se haya hecho un tutorial en YouTube. Tenés un don para enseñar inigualable 😀
3
Acabo de terminar el proyecto de la calculadora y no me arrepiento de las más de 5 horas que me ha costado llegar hasta aquí. Cada minuto ha valido completamente la pena!
90
Estefania es el único ser humano que me hace entender perfectamente sin dejar dudas en mi cerebro, ya que tengo deficit de atención y me cuesta mucho. Muchas gracias por existir y ayudar !!! :D
171
Termine el curso de React en coderhouse, y no aprendi nada. Pero con este Curso, ahora si que entiendo React, gracias Estefania, sos una genia. Nuevo sub, y voy a seguir viendo tus videos, 😀
6
Que contenido más didactico, felicitaciones! Algunos comentarios sobre las nuevas tendencias, se que este lleva a lo menos un año pero por si alguien lee esto y quiere saber si algunas cosas han cambiado. 1. Últimamente es tendencia iniciar un proyecto React con Vite debido a que es más liviano 2. Es un practica muy habitual en React utilizar las funciones flechas sobre otras maneras de escribir funciones.
5
Increible curso muy concreto y claramente explicado por la hermosisima Estefania, hice curso y voy a decirlo con nombre propio Victor Robles en udemy y se queda totalmente desactualizado enredado, este video es excelente y encima gratisss de no creer
6
Son música para mis oidos escuchar la vos de una dama, en este mundo de la programacion, gracias por compartir tus conocimientos.
1
La verdad habia visto muchisimos cursos y no entendia absolutamente nada. Es increible lo bien que explica ella, la verdad le doy un 1000.
6